import style from './index.module.less'
import { DownFill } from 'antd-mobile-icons'
import { useMemo, useState } from 'react'
import classNames from 'classnames'
import { useAppDispatch } from '@src/redux/hook'
import { push } from '@src/redux/reducers/pages'

function Main ({ data }) {
  const [active, setActive] = useState(false)
  const dispatch = useAppDispatch()
  const content = useMemo(() => {
    const o = data.claim || { statement: '' }
    return o ? o.statement || '无' : '无'
  }, [data])
  return (
    <div className={classNames(style.container, {[style.active]: active})} onClick={() => {
      setActive(true)
      dispatch(push({ element: 'editReason', meta: {  caseid: data.id } }))
      setTimeout(() => {
        setActive(false)
      }, 150)
    }}>
      <div className={style.inner}>
        <div className={style.label}>事实与理由</div>
        <div className={style.value}>{content}</div>
        <div className={style['icon-container']}><DownFill className={style.icon} /></div>
      </div>
    </div>
  )
}

export default Main